<!--<template>-->
<!--  <a-row id="globalHeader" align="center" :wrap="false">-->
<!--    <a-col flex="auto">-->
<!--      <a-menu-->
<!--        mode="horizontal"-->
<!--        :selected-keys="selectedKeys"-->
<!--        @menu-item-click="doMenuClick"-->
<!--      >-->
<!--        <a-menu-item-->
<!--          key="0"-->
<!--          :style="{ padding: 0, marginRight: '38px' }"-->
<!--          disabled-->
<!--        >-->
<!--          <div class="title-bar">-->
<!--            <img class="logo" src="../assets/oj-logo.svg" />-->
<!--            <div class="title">鱼 OJ</div>-->
<!--          </div>-->
<!--        </a-menu-item>-->
<!--        <a-menu-item v-for="item in visibleRoutes" :key="item.path">-->
<!--          {{ item.name }}-->
<!--        </a-menu-item>-->
<!--      </a-menu>-->
<!--    </a-col>-->
<!--    <a-col flex="100px">-->
<!--      <div>-->
<!--        {{ store.state.user?.loginUser?.userName ?? "未登录" }}-->
<!--      </div>-->
<!--    </a-col>-->
<!--  </a-row>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import { routes } from "../router/routes";-->
<!--import { useRoute, useRouter } from "vue-router";-->
<!--import { computed, ref } from "vue";-->
<!--import { useStore } from "vuex";-->
<!--import checkAccess from "@/access/checkAccess";-->
<!--import ACCESS_ENUM from "@/access/accessEnum";-->

<!--const router = useRouter();-->
<!--const store = useStore();-->

<!--// 展示在菜单的路由数组-->
<!--const visibleRoutes = computed(() => {-->
<!--  return routes.filter((item, index) => {-->
<!--    if (item.meta?.hideInMenu) {-->
<!--      return false;-->
<!--    }-->
<!--    // 根据权限过滤菜单-->
<!--    if (-->
<!--      !checkAccess(store.state.user.loginUser, item?.meta?.access as string)-->
<!--    ) {-->
<!--      return false;-->
<!--    }-->
<!--    return true;-->
<!--  });-->
<!--});-->

<!--// 默认主页-->
<!--const selectedKeys = ref(["/"]);-->

<!--// 路由跳转后，更新选中的菜单项-->
<!--router.afterEach((to, from, failure) => {-->
<!--  selectedKeys.value = [to.path];-->
<!--});-->

<!--console.log();-->

<!--setTimeout(() => {-->
<!--  store.dispatch("user/getLoginUser", {-->
<!--    userName: "鱼皮管理员",-->
<!--    userRole: ACCESS_ENUM.ADMIN,-->
<!--  });-->
<!--}, 3000);-->

<!--const doMenuClick = (key: string) => {-->
<!--  router.push({-->
<!--    path: key,-->
<!--  });-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.title-bar {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.title {-->
<!--  color: #444;-->
<!--  margin-left: 16px;-->
<!--}-->

<!--.logo {-->
<!--  height: 48px;-->
<!--}-->
<!--</style>-->
<!--
<template>
  <a-row id="globalHeader" align="center" :wrap="false">
    <a-col flex="auto">
      <a-menu
        mode="horizontal"
        :selected-keys="selectedKeys"
        @menu-item-click="doMenuClick"
      >
        <a-menu-item
          key="0"
          :style="{ padding: 0, marginRight: '38px' }"
          disabled
        >
          <div class="title-bar">
            <img class="logo" src="../assets/oj-logo.svg" />
            <div class="title">鱼 OJ</div>
          </div>
        </a-menu-item>
        <a-menu-item v-for="item in visibleRoutes" :key="item.path">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-col>
    <a-col flex="100px">
      &lt;!&ndash; ============= 修改用户状态显示部分 ============= &ndash;&gt;
      <template v-if="!store.state.user?.loginUser?.id">
        <a-link @click="goLogin">未登录</a-link>
      </template>
      <template v-else>
        <a-popover trigger="click" position="bottom">
          <a-link>{{ store.state.user.loginUser.userName || "无名" }}</a-link>
          <template #content>
            <p class="logout" @click="handleLogout">退出登录</p>
          </template>
        </a-popover>
      </template>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { routes } from "../router/routes";
import { useRoute, useRouter } from "vue-router";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import checkAccess from "@/access/checkAccess";
import ACCESS_ENUM from "@/access/accessEnum";

import message from "@arco-design/web-vue/es/message";


const router = useRouter();
const store = useStore();

// 展示在菜单的路由数组
const visibleRoutes = computed(() => {
  return routes.filter((item, index) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    if (
      !checkAccess(store.state.user.loginUser, item?.meta?.access as string)
    ) {
      return false;
    }
    return true;
  });
});

// 默认主页
const selectedKeys = ref(["/"]);

// 路由跳转后，更新选中的菜单项
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

setTimeout(() => {
  store.dispatch("user/getLoginUser", {
    userName: "鱼皮管理员",
    userRole: ACCESS_ENUM.ADMIN,
  });
}, 3000);

const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};


const handleLogout = async () => {
  const success = await store.dispatch("user/logout");
  if (success) {
    message.success("退出登录成功");
    router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    message.error("退出登录失败");
  }
};

const goLogin = () => {
  router.push({
    path: "/user/login",
    replace: true,
  });
};

</script>

<style scoped>
.title-bar {
  display: flex;
  align-items: center;
}

.title {
  color: #444;
  margin-left: 16px;
}

.logo {
  height: 48px;
}


.logout {
  cursor: pointer;
  padding: 8px 12px;
}

.logout:hover {
  background-color: var(&#45;&#45;color-fill-2);
}


</style>
-->
<template>
  <a-row id="globalHeader" align="center" :wrap="false">
    <a-col flex="auto">
      <a-menu
        mode="horizontal"
        :selected-keys="selectedKeys"
        @menu-item-click="doMenuClick"
      >
        <a-menu-item
          key="0"
          :style="{ padding: 0, marginRight: '38px' }"
          disabled
        >
          <div class="title-bar">
            <img class="logo" src="../assets/oj-logo.svg" />
            <div class="title">miku OJ</div>
          </div>
        </a-menu-item>
        <a-menu-item v-for="item in visibleRoutes" :key="item.path">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-col>
    <a-col flex="100px">
      <!-- ============= 修改1：重构用户菜单 ============= -->
      <template v-if="!store.state.user?.loginUser?.id">
        <a-link @click="goLogin">未登录</a-link>
      </template>
      <template v-else>
        <a-popover trigger="click" position="bottom">
          <div class="user-menu-trigger">
            <a-avatar :size="24" :image-url="store.state.user.loginUser.userAvatar">
              {{ store.state.user.loginUser.userName?.charAt(0) || "U" }}
            </a-avatar>
            <span class="user-name">{{
              store.state.user.loginUser.userName || "无名"
            }}</span>
          </div>
          <template #content>
            <div class="user-menu">
              <div class="menu-item" @click="goToProfile">
                <icon-user /> 个人中心
              </div>
              <div class="menu-item" @click="handleLogout">
                <icon-export /> 退出登录
              </div>
            </div>
          </template>
        </a-popover>
      </template>
      <!-- ============= 修改1结束 ============= -->
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { routes } from "../router/routes";
import { useRoute, useRouter } from "vue-router";
import {computed, onMounted, ref} from "vue";
import { useStore } from "vuex";
import checkAccess from "@/access/checkAccess";
import ACCESS_ENUM from "@/access/accessEnum";
import message from "@arco-design/web-vue/es/message";
// ============= 修改2：新增图标导入 =============
import { IconUser, IconExport } from "@arco-design/web-vue/es/icon";
import {UserControllerService} from "../../generated";
// ============= 修改2结束 =============

const router = useRouter();
const store = useStore();

// 展示在菜单的路由数组
const visibleRoutes = computed(() => {
  return routes.filter((item, index) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    if (
      !checkAccess(store.state.user.loginUser, item?.meta?.access as string)
    ) {
      return false;
    }
    return true;
  });
});

// 默认主页
const selectedKeys = ref(["/"]);



// 路由跳转后，更新选中的菜单项
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

setTimeout(() => {
  store.dispatch("user/getLoginUser", {
    userName: "鱼皮管理员",
    userRole: ACCESS_ENUM.ADMIN,
  });
}, 3000);

const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};

const handleLogout = async () => {
  const success = await store.dispatch("user/logout");
  if (success) {
    message.success("退出登录成功");
    router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    message.error("退出登录失败");
  }
};

const goLogin = () => {
  router.push({
    path: "/user/login",
    replace: true,
  });
};

// ============= 修改3：新增个人中心跳转方法 =============
const goToProfile = () => {
  router.push({
    path: "/profile",
  });
};

// ============= 修改3结束 =============
</script>

<style scoped>
.title-bar {
  display: flex;
  align-items: center;
}

.title {
  color: #444;
  margin-left: 16px;
}

.logo {
  height: 48px;
}

/* ============= 修改4：新增用户菜单样式 ============= */
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.user-menu-trigger:hover {
  background-color: var(--color-fill-2);
}

.user-name {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu {
  padding: 4px 0;
  min-width: 120px;
}

.menu-item {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: var(--color-fill-2);
}
/* ============= 修改4结束 ============= */
</style>
